<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表过滤</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="root">
    <input type="text" v-model="keyWord">
    <ul>
      <li v-for="(person,index) in filterResulte" :key="person.id">
        {{person.name}}-{{person.age}}
      </li>
    </ul>

  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;

  new Vue({
    el: '#root',
    data: {
      keyWord: "",
      person: [
        { id: "001", name: "周杰伦", age: 22 },
        { id: "002", name: "马冬梅", age: 19 },
        { id: "003", name: "周华雄", age: 20 },
        { id: "004", name: "马保国", age: 16 }
      ],
      filterPerson:[]
    },
    watch: {
      // keyWord: {
      //   // 初始化时执行一次
      //   immediate: true,
      //   handler(val) {
      //     this.filterPerson=this.person.filter(item => {
      //       return item.name.indexOf(val) !== -1
      //     })
      //   }
      // }
    },
    computed: {
        filterResulte() {
          return this.person.filter(item => {
            return item.name.indexOf(this.keyWord) !== -1
          })
        }
      }
  })
</script>

</html